<template>
	<section>
		<header class="bbtm  w100 wallfff" v-if="isHerde" :class="{fixed_u:isfixd}"> 
			<h1 class="sz36 hue333 flex_core fontwt hei100">车辆团购</h1> 
		</header>
		<screen @getData="toshow" ></screen>
		<div class="content " :class="{content_margin:isHerde}" v-if="ifNull" > 
			<mt-loadmore class="" :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" :autoFill="false"  ref="loadmore">
			   <div slot="top" class="ToLoading  mint-loadmore-top " :class="{mint_top:popupVisible}">
				     <div class="spinner">
						  <div class="rect1"></div>
						  <div class="rect2"></div>
						  <div class="rect3"></div>
						  <div class="rect4"></div>
						  <div class="rect5"></div>
					</div> 
				   	<span class="dorpSpan">下拉刷新</span> 
			   </div>
			   <ul  class=" " :class="isHerde?'content_13':'content_14'" > 
				      <li v-for="item in showList" :data-CarID="item.Car_ID" >
						<router-link to="/buyingAll/buyCarProduct" class="flexs">
						  <figure class="l_h0 imginterg">
						  	<img :src="item.Image_Url"  alt="加载失败" :onerror="imgError" />
						  </figure>
						  <dl class="flex1 flex_column ">
						  	 <dt class="carName aline"><span>{{item.CarBrand_Name}}</span>-<span>{{item.Car_Name}}</span></dt>
						  	 <dd  class="carGauge aline">规格：<span>{{item.CarType_Name}}</span></dd>
						  	 <dd class="carGauge">指导价：<span>{{item.Car_GuidePrice | money}}万</span></dd>
						  	 <dd class="carSth">已有<span>500</span>/1000人参团</dd>
						  </dl> 
						</router-link> 
					</li> 
			   </ul>
			    <div slot="bottom" class="ToLoading  mint-loadmore-bottom" :class="{mint_bottom:popupVisible}" v-show="bottomShow">
				     <div   v-if="iSshow">
				     	<div class="spinner" >
						   <div class="rect1"></div>
						   <div class="rect2"></div>
						   <div class="rect3"></div>
						   <div class="rect4"></div>
						   <div class="rect5"></div>
						</div> 
					   	<span>上拉加载更多</span> 
				     </div> 
			    	<span class="moveSpan" v-else >抱歉~没有更多信息</span> 
			    </div>
			</mt-loadmore>
		</div>
		<div class="content select_null" :class="{content_margin:isHerde}" v-else>
			<i><img src="../../assets/Buying/pic_zanwuneirong.png"/></i>
			<p class="null_p1">没有搜索到结果</p>
			<p class="null_p2">可以减少筛选内容试试</p>
		</div> 
		<footers></footers>
	</section>
</template>

<script>
	import { Toast } from 'mint-ui';
	import { Loadmore } from 'mint-ui';  
	import { Indicator } from 'mint-ui';
	import screen from '../../components/Other/screen'
	import footers from '../../components/Other/footers'
	export default{
		name:'myscreen',
		components:{
			screen,
			footers
		},
		data(){
			return{
				listData: {
					pageIndex:1,
				},
				mycard: "",
				PageCount:'',
				showList:[],
				orderType:'PriceAsc',
				catType:'',
				carBrand:'',
				startPrice:'',
				endPrice:'', 
				allLoaded:false,
				popupVisible:false,
				topShow:true,//下拉刷新
				bottomShow:true,//上拉加载
				iSshow:true, 
				isfixd:true,
				ifNull:true
			}
		},
		created: function() {
			this.urls = this.$store.state.urls;
			this.ImgUrls = this.$store.state.ImgUrls;
			this.isHerde=this.$store.state.Type;
			this.imgError=this.$store.state.imgError;
		},
		mounted:function(){
			 this.listShow();
			/* console.log(this.isHerde);
			 
			 window.onscroll = function () { 
				var len =  document.body.scrollTop;
				if(len>50){
					console.log(1)
				 	this.isfixd=true; 
				}
				if(len<50){
					console.log(2)
					this.isfixd=false;
				}
			}*/
		},
		methods:{
			loadTop:function(){ 
				this.showList=[];
				this.listData.pageIndex=1;
				this.listShow();
				this.popupVisible=true;
			  	this.$refs.loadmore.onTopLoaded();
			}, 
			loadBottom:function(){ 
				this.listData.pageIndex++;
			 if(this.listData.pageIndex <= this.PageCount){
				 	//this.listData.pageIndex=this.PageCount  如果大于了总页数 赋值最大页数
				 	for(let n in this.mycard){
						this.listData[n] = this.mycard[n]; 
					}
				 	this.listShow();
				 	this.popupVisible=true;
	  		   	 }else{
	  		   	 	this.iSshow=false; 
		  		 }   
			  	this.$refs.loadmore.onBottomLoaded();
			},
			toshow:function(data){
				this.showList=[];
				this.mycard = data;
				this.listData = {
					pageIndex:1,
				}; 
				for(let n in this.mycard){
					this.listData[n] = this.mycard[n]; 
				}
	 			this.listShow();
			},
			Visible:function(){
		      	this.popupVisible=false;
		      },
			listShow:function(){
				console.log(this.listData);
				this.iSshow=true;
				Indicator.open({
				  spinnerType:'snake'
				}); 
				this.$http.get(this.urls+"/V1.0/GetCar",{
					params: this.listData
				}).then((res) => { 
					this.PageCount=res.data.Return_Data.PageCount;
					 for (var i = 0; i < res.data.Return_Data.PageData.length; i++) {
			     	 	 this.showList.push(res.data.Return_Data.PageData[i]);
			     	} 
			     	console.log(this.showList.length);
			     	if(this.showList.length<1){
			     		this.ifNull=false;
			     	}else{
			     		this.ifNull=true;
			     	}
					Indicator.close();
					setTimeout(this.Visible,2000);
				}).catch((err) => {
					 Indicator.close();
				}); 
				
			}  
		},
		filters:{
			money:function(val){
				let money=val/10000;
				if(money==0){
					money=0;
				}else{
					money=Number(money).toFixed(2);
				}
				 return money
				console.log(money)
			}
		}
	}
</script>

<style scoped>
	.content{
		width: 100%;
		height: 100%;
		margin-top:1.6rem;
	}
	.content_margin{ 
		margin-top:2.9333333333rem;
		margin-bottom: 1.4666666666rem;
	}
	.content_13{
		min-height: 13rem;
	}
	.content_14{
		min-height: 14rem;
	}
	.content ul{
		width: 100%;
		overflow: hidden;
	}
	.content ul li{
		padding:0.1333333333rem 0.2rem;
		background-color: #fff;
		margin-bottom: 0.1333333333rem;
	}
	.content ul li a{
		 
		width: 100%;
	}
	.imginterg{
		width:38%;
		height:2.6666666666rem; 
		border:none;
		margin-right:2%;
	}
	.imginterg img{
		width: 100%;
		height: 100%; 
	}
	.carName{
		font-size: 0.3733333333rem;
		color: #333;
		line-height: 0.6666666666rem;
	}
	.carGauge{
		font-size: 0.32rem;
		color: #999;
	}
	.carSth{
		font-size: 0.32rem;
		color:#df4444;
		line-height: 0.6666666666rem;
	}
	
	
	
	/* 加载动画 */
	.spinner {
	  margin:0rem 0 0.2rem 0;
	 /*  width: 0.6666666667rem; */
	  height: 0.6666666667rem;
	  text-align: center;
	  font-size: 0.2666666667rem;
	}
	.spinner > div {
	  background-color: #db2023;
	  height: 100%;
	  width: 0.1333333333rem;
	  display: inline-block; 
	  -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
	  animation: stretchdelay 1.2s infinite ease-in-out;
	}
	 
	.spinner .rect2 {
	  -webkit-animation-delay: -1.1s;
	  animation-delay: -1.1s;
	}
	 
	.spinner .rect3 {
	  -webkit-animation-delay: -1.0s;
	  animation-delay: -1.0s;
	}
	 
	.spinner .rect4 {
	  -webkit-animation-delay: -0.9s;
	  animation-delay: -0.9s;
	}
	 
	.spinner .rect5 {
	  -webkit-animation-delay: -0.8s;
	  animation-delay: -0.8s;
	}
	 
	@-webkit-keyframes stretchdelay {
	  0%, 40%, 100% { -webkit-transform: scaleY(0.4) } 
	  20% { -webkit-transform: scaleY(1.0) }
	}
	 
	@keyframes stretchdelay {
	  0%, 40%, 100% {
	    transform: scaleY(0.4);
	    -webkit-transform: scaleY(0.4);
	  }  20% {
	    transform: scaleY(1.0);
	    -webkit-transform: scaleY(1.0);
	  }
	}
	.ToLoading{
		display: block;
		width:100%;
		float: left;
	}
	.ToLoading p{
		font-size:0.32rem;
		color: #db2023;
		text-align: center;
		padding-top: 0.2rem;
	}
	.mint-loadmore-top, .mint-loadmore-bottom{
		line-height:0 !important; 
	}
	.mint-loadmore-bottom{
		height:0 !important; 
	}


	.moveSpan{
		line-height: 0.6666666667rem;
	}
	.dorpSpan{
		margin-top: 0.2rem;
	}
	.mint-popup-top{
		width: 100%;
		height:1.0666666667rem;
	}
	.mint-loadmore-top{ 
		margin-top: -1.6rem;
		/* height: 0 !important; */
	}
	 .mint-loadmore-bottom{
	 	margin-bottom:0;
	 	
	 }
	.update_p{
		position: relative;
		bottom:-0.2666666667rem;
		left: 0;
		width: 100%;
		z-index: 100;
		height:1.0666666667rem;
		background-color:rgba(0,0,0,0.5);
		color: #fff;
		font-size: 0.3733333333rem;
		text-align: center;
		line-height: 1.0666666667rem;

	}
	.mint_top{
		margin-top:0 !important;
	}
	.mint_bottom{
		margin-bottom:1.6rem !important;
	}
	.select_null{
		text-align: center;
	}
	.select_null i{
		display: inline-block;
		/*width: 1.24rem;
		height: 0.9733333333rem;*/
		margin-bottom: 0.5333333333rem;
		margin-top: 2.2666666666rem;
	}
	.select_null i img{
		width: 100%;
	}
	.select_null p{
		font-size: 0.4rem;
		margin-bottom: 0.2666666666rem;
		color: #999;
	}
	.select_null p.null_p1{
		color: #333;
	}
</style>